<!DOCTYPE html>
<html lang="en" xmlns thymeleaf="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="Login.css"/>
</head>
<body>
<div style="text-align: center">
    <from>
        ID：<input type="text" value="用户名" id="name"><br>
        密码：<input type="password" style="margin-bottom: 5px" id="password"><br>
        <button type="submit" id="but">登录</button>
        <button type="submit">注册</button>
    </from>
</div>

<div>
    id:<input type="text" id="id">
    pwd:<input type="password" id="pwd">
    <button id="login">登录</button>
</div>


<div>
    账号：<input type="text" id="id1"><br>
    密码：<input type="password" id="pwd1"><br>
    <input type="button" id="but1" onfocus="alert('就你还敢点我')" value="登录">
</div>



<div>
    <input type="button" id="btn" value="jjjllll">
</div>



</body>

<script>
    // 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.
    // 事件源 : window    事件类型 : 页面加载完成事件 (onload)  执行指令: 就是赋值的 function 函数.
    window.onload = function () {

        // 获取页面的 btn 按钮
        var btn = document.getElementById("btn");
        // alert(btn);

        // 给 btn 按钮绑定一个事件 (单击事件 onclick)
        // 事件源 : btn按钮    事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.
        btn.onfocus = function () {
            alert("恭喜你, 中了 500 万!");
        }
    }

</script>

<script>
    // alert('asdfasd')
    // alert(1? "aaa" : "bbb");
</script>
<script>
    $(function () {
        $("#but1").onclick(function (){
            console.log("111111")
        })
    });
</script>




<script type="text/javascript">
    $('#login').click($.ajax({
        url:'http://locahost:8080/login1',
        data:{
            name:$('#id').val(),
            pwd:$('#pwd').val()
        },
        method:'post',
        success(data){
            console.log(data)
        }
    }))

    $(".but").click(function(event) {
        // 获取输入框数据
        var name = $('#name').val();
        var password = $('#password').val();

        var jsonData = { // 封装接口数据
            "name": name,
            "password": password,
        }
        login(jsonData);
    })

    /**
     * 请求接口
     */
    function login(jsonData) {
        $.ajax({
            type: "GET",
            url: "http://localhost:8090/login1",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            data: jsonData,
            dataType: "json",
            success: function(data){
                if (data.code == 200) {
                    alert(data.msg);
                    window.location.href = "home";
                } else {
                    alert(data.msg);
                }
            }
        });
    }
</script>

<!--&lt;!&ndash;样式&ndash;&gt;-->
<!--<style>-->
<!--    html{-->
<!--        width: 100%;-->
<!--        height: 100%;-->
<!--        overflow: hidden;-->
<!--    }-->
<!--    body{-->
<!--        width: 100%;-->
<!--        height: 100%;-->
<!--        font-family: 'Open Sans',sans-serif;-->
<!--        margin: 0;-->
<!--        background-color: #fff;-->
<!--    }-->
<!--    #login{-->
<!--        position: absolute;-->
<!--        top: 50%;-->
<!--        left:50%;-->
<!--        margin: -150px 0 0 -150px;-->
<!--        width: 300px;-->
<!--        height: 300px;-->
<!--    }-->
<!--    #login h1{-->
<!--        color: #000;-->
<!--        /*text-shadow:0 0 10px;*/-->
<!--        /*letter-spacing: 1px;*/-->
<!--        text-align: center;-->
<!--    }-->
<!--    h1{-->
<!--        font-size: 2em;-->
<!--        margin: 0.67em 0;-->
<!--    }-->
<!--    input{-->
<!--        width: 278px;-->
<!--        height: 18px;-->
<!--        margin-bottom: 10px;-->
<!--        outline: none;-->
<!--        padding: 10px;-->
<!--        font-size: 13px;-->
<!--        color: #fff;-->
<!--        text-shadow:1px 1px 1px;-->
<!--        border-top: 1px solid #312E3D;-->
<!--        border-left: 1px solid #312E3D;-->
<!--        border-right: 1px solid #312E3D;-->
<!--        border-bottom: 1px solid #56536A;-->
<!--        border-radius: 4px;-->
<!--        background-color: #2D2D3F;-->
<!--    }-->
<!--    .but{-->
<!--        width: 300px;-->
<!--        min-height: 20px;-->
<!--        display: block;-->
<!--        background-color: #4a77d4;-->
<!--        border: 1px solid #3762bc;-->
<!--        color: #fff;-->
<!--        padding: 9px 14px;-->
<!--        font-size: 15px;-->
<!--        line-height: normal;-->
<!--        border-radius: 5px;-->
<!--        margin: 0;-->
<!--    }-->
</style>
</html>